<!-- 添加侧边导航栏 -->
<div class="side-navigation" style="display: flex; transition: transform 0.3s ease; will-change: transform;background-color: #000000;">
  <div class="nav-icon" data-panel="projectionPanel" title="投影方式">
    <span class="icon">🌍</span>
  </div>
  <div class="nav-icon" data-panel="collapseOne" title="地图选项">
    <span class="icon">🗺️</span>
  </div>
  <div class="nav-icon" data-panel="collapseThree" title="图层">
    <span class="icon">🗍</span>
  </div>
  <div class="nav-icon" data-panel="collapseFive" title="概览视图">
    <span class="icon">👁️</span>
  </div>
  <div class="nav-icon" data-panel="help" title="使用教程">
    <span class="icon">❓</span>
  </div>
</div>

<div id="lunaserv_container">
	<div id="lunaserv_map">
	</div>
</div>
<div class="lunaserv_text_entry_area click-action" style="display:none">
	<ul style="list-style:none">
		<li>
		<label id="point-of-interest">              
			<span title="Click to recenter layer">
				<input class="click-select" name="lunaserv_click_mode" type="radio" value="recenter">
			</span>
		</label>
		</li>
		<li>
		<label id="get-footprint">
			<span title="Click to bring up footprint info">
				<input class="click-select" name="lunaserv_click_mode" type="radio" value="feature">
			</span>
		</label>
		</li>
		<li>
		<label id="bounding-box">
			<span title="Click to enable bounding box search">
				<input class="click-select" name="lunaserv_click_mode" type="radio" value="bounding-box">
			</span>
		</label>
		</li>
	</ul>
</div>
<style>
  .projection-options {
    margin-top: -15px;
    margin-left: -45px;
    width: 388px;
  }
  
  .projection-option {
    padding: 10px;

    color: white;
    cursor: pointer;
    width: 100%;
    border-bottom:2px solid black;
    transition: background-color 0.3s ease;
  }
  
  .projection-option:hover {
    background-color:#3190D0;
  }
  
  .projection-option:active {
    background-color: #3190D0;
  }
  .zx_button { 
    display:inline-block;
    background-color:white;
    color: black;
    width: 120px;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    font-size: 18px;
    border: 1px solid black;  
    border-radius: 8px;
  }
</style>
<div class="panel-group" id="accordion" style="display: none;">
    <!-- Projection Panel -->
    <div class="panel panel-default" id="projection-panel" style="display: none; position: absolute; top: 0; left: 0; width: 400px; height: 100%;">
        <div class="panel-heading">
            <h2 class="panel-title">
                <span class="keep-open zx_button" >
                    投影方式
                </span>
            </h2>
        </div>
        <div id="projectionPanel" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="lunaserv_text_entry_area">
                    <div class="lunaserv_text_entry_item">
                        <div class="projection-options">
                            <div class="projection-option" onclick="recenter(unproject(map.getCenter()).lon, unproject(map.getCenter()).lat, true, true, current_body, 'ORTHO');">
                                正交
                            </div>
                            <div class="projection-option" onclick="recenter(unproject(map.getCenter()).lon, unproject(map.getCenter()).lat, true, true, current_body, '2000');">
                                简单圆柱
                            </div>
                            <div class="projection-option" onclick="recenter(unproject(map.getCenter()).lon, unproject(map.getCenter()).lat, true, true, current_body, 'NP_STEREO');">
                                北极立体
                            </div>
                            <div class="projection-option" onclick="recenter(unproject(map.getCenter()).lon, unproject(map.getCenter()).lat, true, true, current_body, 'SP_STEREO');">
                                南极立体
                            </div>
                            <div class="projection-option" onclick="recenter(unproject(map.getCenter()).lon, unproject(map.getCenter()).lat, true, true, current_body, 'SINU');">
                                正弦
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Map Options -->
	<div class="panel panel-default" id="panel-one" style="display: none; position: absolute; top: 0; left: 0; width: 400px; height: 100%;">
		<div class="panel-heading">
			<h2 class="panel-title">
				<span class="keep-open">
					地图选项
				</span>
			</h2>
		</div>
		<div id="collapseOne" class="panel-collapse collapse">
			<div class="panel-body">
				<div class="lunaserv_text_entry_area">
					<span id="lunaserv_body_switch_area">
						<div class="lunaserv_text_entry_item">
							<label>查看对象:</label>
							<select id="lunaserv_body_switch_menu" onchange="recenter(null, null, false, false, value);">
							</select>
							<br />
						</div>
					</span>
					<!-- 投影选项已移至专用面板 -->
				</div>
				<!-- STILL MAP OPTIONS end lunaserv_text_entry_area -->
				<div class="lunaserv_text_entry_area" id="lunaserv_recentering_controls">
					<div class="lunaserv_text_entry_item" id="lunaserv_lat_field">
						<label>中心纬度:</label>
						<input type="text" id="lunaserv_lat_c" value="0.0" size="8" />
					</div>
					<div id="lunaserv_lat_c_err" class="lunaserv_text_entry_error">
					</div>
					<div class="lunaserv_text_entry_item" id="lunaserv_lon_field">
						<label>中心经度:</label>
						<input type="text" id="lunaserv_lon_c" value="0.0" size="8" />
					</div>
					<div id="lunaserv_lon_c_err" class="lunaserv_text_entry_error">
					</div>
					<div class="lunaserv_text_entry_button">
						<input class="btn" type="button" id="lunaserv_recenter_button" value="重新定位和投影" />
					</div>
					<hr>
				</div>
				<div class="lunaserv_text_entry_item" id="dateRange">
					<label>日期范围:</label>
					<div class="input-daterange input-group" id="datepicker" data-date-format="yyyy/mm/dd">
						<input type="text" class="input-sm form-control" name="start" />
						<span class="input-group-addon">to</span>
						<input type="text" class="input-sm form-control" name="end" />
					</div>
					<input type="button" class="btn" id="apply_date_range" value="应用" onclick="apply_date_range();" />
					<hr>
				</div>
				<div class="lunaserv_text_entry_item" id="mds_controls">
					<input type="button" class="btn lunaserv_link" id="lunaserv_clear_mds" value="清除元数据搜索"/>
					<input type="button" class="btn lunaserv_link" id="lunaserv_return_to_mds" value="返回到元数据搜索"/>
					<hr>
				</div>
				<div style="float:right">
					<a id="lunaserv_permalink" class="lunaserv_link">
						本视图分享链接
					</a>
				</div>
			</div>
		</div>
	</div>
	<!-- Layers -->
	<div class="panel panel-default" id="panel-two" style="display: none; position: absolute; top: 0; left: 0; width: 400px; height: 100%;">
		<div class="panel-heading">
			<h2 class="panel-title">
				<span>
					图层
				</span>
			</h2>
		</div>
		<div id="collapseThree" class="panel-collapse collapse" >
			<div class="panel-body" >
				<div id="lunaserv_layers" style="height: 95%!important;">
				</div>      
			</div>
		</div>
	</div>
	<div class="panel panel-default" id="panel-three" style="display: none; position: absolute; top: 0; left: 0; width: 400px; height: 100%;">
		<!-- /lunaserv_map_controls -->
		<div class="panel-heading">
			<h2 class="panel-title">
				<span>
					概览视图
				</span>
			</h2>
		</div>
		<div id="collapseFive" class="panel-collapse collapse">
			<div class="panel-body">
				<div class="lunaserv_controls_opaque">
					<div>
						<span style="color:white">
							单击以变换投影中心
						</span>
					</div>
					<div id="lunaserv_overview">
						<img id="lunaserv_overview_map" src="" />
						<div id="lunaserv_overview_loading" style="color:white">
							加载概览图中...
						</div>
						<div id="lunaserv_overview_box">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="panel panel-default" id="panel-four" style="display: none; position: absolute; top: 0; left: 0; width: 400px; height: 100%;">
		<div class="panel-heading">
			<h2 class="panel-title">
				<span id="help">
					使用教程
				</span>
			</h2>
		</div>
	</div>
</div>
<!-- 比例尺与经纬度显示栏 -->
<div id="scale_bar" class="lunaserv_controls_translucent">
    <ul id="lunaserv_layer_legend">
    </ul>
    <div class="lat-lon-tracker hidden-xs">
        <label>纬度, 经度: </label>
        <div id="lunaserv_mouse_lat"></div>, <div id="lunaserv_mouse_lon"></div>
    </div>
    <div id="lunaserv_scaletext">
    </div>
    <img id="lunaserv_scalebar" src="images/scale.png">
</div>

<!-- 添加面板控制的JavaScript -->
<script>
  // 当前激活的面板
  let activePanel = null;

  // 获取所有导航图标
  const navIcons = document.querySelectorAll('.nav-icon');
  
  // 为每个图标添加点击事件监听器
  navIcons.forEach(icon => {
    icon.addEventListener('click', function() {
      const panelId = this.getAttribute('data-panel');
      togglePanel(panelId);
    });
  });

  // 切换面板显示状态
  function togglePanel(panelId) {
    // 如果点击的是当前激活的面板，则隐藏它
    if (activePanel === panelId) {
      hidePanel(panelId);
      activePanel = null;
      updateActiveIcon(null);
    } else {
      // 隐藏当前激活的面板（如果有）
      if (activePanel) {
        hidePanel(activePanel);
      }
      
      // 显示新面板
      showPanel(panelId);
      activePanel = panelId;
      updateActiveIcon(panelId);
    }
    
    // 检查是否需要显示或隐藏panel-group
    togglePanelGroup();
  }

  // 显示panel-group容器
  function showPanelGroup() {
    const panelGroup = document.getElementById('accordion');
    if (panelGroup) {
      panelGroup.style.display = 'block';
    }
  }

  // 隐藏panel-group容器
  function hidePanelGroup() {
    const panelGroup = document.getElementById('accordion');
    if (panelGroup) {
      panelGroup.style.display = 'none';
    }
  }

  // 切换panel-group显示状态（根据是否有面板显示来决定）
  function togglePanelGroup() {
    // 检查是否有面板正在显示
    const panels = [
      document.getElementById('projection-panel'),
      document.getElementById('panel-one'),
      document.getElementById('panel-two'),
      document.getElementById('panel-three'),
      document.getElementById('panel-four')
    ];
    
    const isAnyPanelVisible = panels.some(panel => panel && panel.style.display === 'block');
    
    if (isAnyPanelVisible) {
      showPanelGroup();
    } else {
      hidePanelGroup();
    }
  }

  // 显示指定面板
  function showPanel(panelId) {
    // 首先确定应该显示哪个面板元素
    let panelElement = null;
    switch(panelId) {
      case 'projectionPanel':
        panelElement = document.getElementById('projection-panel');
        break;
      case 'collapseOne':
        panelElement = document.getElementById('panel-one');
        break;
      case 'collapseThree':
        panelElement = document.getElementById('panel-two');
        break;
      case 'collapseFive':
        panelElement = document.getElementById('panel-three');
        break;
      case 'help':
        panelElement = document.getElementById('panel-four');
        break;
    }

    if (panelElement) {
      panelElement.style.display = 'block';
    }

    if (panelId === 'help') {
      // 对于使用教程面板，直接触发点击事件
      const helpElement = document.getElementById('help');
      if (helpElement) {
        // 检查是否已经有onclick处理函数
        if (typeof show_tour === 'function') {
          show_tour();
        }
      }
    } else if (panelId !== 'projectionPanel') {
      // 对于其他面板（除了投影面板），添加'in'类以显示
      const panel = document.getElementById(panelId);
      if (panel) {
        panel.classList.add('in');
      }
    }
  }

  // 隐藏指定面板
  function hidePanel(panelId) {
    // 首先确定应该隐藏哪个面板元素
    let panelElement = null;
    switch(panelId) {
      case 'projectionPanel':
        panelElement = document.getElementById('projection-panel');
        break;
      case 'collapseOne':
        panelElement = document.getElementById('panel-one');
        break;
      case 'collapseThree':
        panelElement = document.getElementById('panel-two');
        break;
      case 'collapseFive':
        panelElement = document.getElementById('panel-three');
        break;
      case 'help':
        panelElement = document.getElementById('panel-four');
        break;
    }

    if (panelElement) {
      panelElement.style.display = 'none';
    }

    // 对于非使用教程面板和非投影面板，移除'in'类以隐藏
    if (panelId !== 'help' && panelId !== 'projectionPanel') {
      const panel = document.getElementById(panelId);
      if (panel) {
        panel.classList.remove('in');
      }
    }
  }

  // 更新激活图标的状态
  function updateActiveIcon(activePanelId) {
    navIcons.forEach(icon => {
      if (icon.getAttribute('data-panel') === activePanelId) {
        icon.classList.add('active');
      } else {
        icon.classList.remove('active');
      }
    });
  }
  
  // 监听来自父窗口的消息
  window.addEventListener('message', function(event) {
    // 建议验证消息来源以确保安全
    // if (event.origin !== 'http://your-domain.com') return;
    
    const message = event.data;
    
    switch(message.type) {
      case 'TOGGLE_LEFT_SIDEBAR':
        toggleLeftSidebar(message.payload?.isCollapsed);
        break;
      default:
        console.log('Unknown message type:', message.type);
    }
  });
  
  // 切换左侧边栏的展开和收起状态，添加动画效果
  function toggleLeftSidebar(collapse) {
    const sideNavigation = document.querySelector('.side-navigation');
    const accordion = document.getElementById('accordion');
    
    if (!sideNavigation) return;
    
    // 如果传入了collapse参数，则直接设置为指定状态
    // 否则切换当前状态
    let isCollapsed = typeof collapse === 'boolean' ? collapse : 
                     sideNavigation.style.display !== 'none';
    
    // 设置动画相关的样式
    sideNavigation.style.transition = 'transform 0.3s ease';
    sideNavigation.style.willChange = 'transform';
    
    if (isCollapsed) {
      // 收起侧边导航栏 - 向左滑出
      sideNavigation.style.transform = 'translateX(-100%)';
      // 动画结束后隐藏元素
      setTimeout(() => {
        sideNavigation.style.display = 'none';
      }, 300);
    } else {
      // 展开侧边导航栏 - 先显示再滑入
      sideNavigation.style.display = 'flex';
      // 强制重绘以确保display生效
      sideNavigation.offsetHeight;
      // 向右滑入
      sideNavigation.style.transform = 'translateX(0)';
    }
    
    // 同时隐藏面板组（收起状态时）
    if (isCollapsed && accordion) {
      accordion.style.display = 'none';
    }
  }
</script>